import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Form, Button, Input, DatePicker, InputNumber, message, Modal } from 'antd'
import OperaPrompt from '@/components/OperaPrompt'
import request from '@/utils/request';
import styles from "./save.less"
import Selector from './selector'

const save = (props: any) => {
    const { location: { state } } = props
    const [visable, setVisable] = useState(false);

    const closeModal = () => {
        setVisable(false);
    };
    const [skuList, setSkuList] = useState<any[]>([])
    const onFinish = (values: any) => {
        values['sku_list'] = skuList
        values["activityId"] = state.activityId
        request(`/promote/sec-kill/goods-add`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            message.success(result.message, 1, () => {

            })
            // getList()
        })
    };
    const selectFinish = (selectedGoods: any) => {
        if (!Array.isArray(selectedGoods.sku_list)) {
            return
        }
        console.log(selectedGoods);
        let data = selectedGoods.sku_list.map((item: any) => ({
            sku_title: item.sku_title,
            sale_price: item.sale_price,
            sku_id: item.id,
            rush_price: "",
            goods_id: selectedGoods.id,
        }))
        setSkuList(data)
    }
    const skuInput = (skuId: number, val: string) => {
        let result: any[] = skuList.map((item: any) => {
            return item.sku_id === skuId ? { ...item, rush_price: val } : item
        })
        setSkuList(result)
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card bordered={false}>
                <OperaPrompt dataList={[
                    "管理员可以在此页添加团购活动"
                ]} />
                <div style={{ paddingTop: "12px" }}>
                    <Form
                        labelCol={{ span: 3 }}
                        onFinish={onFinish}
                    >
                        <Form.Item label="商品详情">
                            <table className={styles.myTable}>
                                <thead>
                                    <tr >
                                        <td>商品名称</td>
                                        <td>商品价格(元)</td>
                                        <td>秒杀价格(元)</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        skuList.map((item: any, inx: number) =>
                                            <tr key={inx}>
                                                <td>{item.sku_title}</td>
                                                <td>￥{item.sale_price}</td>
                                                <td>
                                                    <Input value={item.rush_price} onChange={(e) => { skuInput(item.sku_id, e.target.value) }} />
                                                </td>
                                            </tr>
                                        )
                                    }
                                </tbody>
                            </table>
                            <Button type="primary" onClick={() => { setVisable(true) }}>选择商品</Button>
                        </Form.Item>
                        <Form.Item label="最多购买数量" name="max_buy" required>
                            <InputNumber />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 3 }}>
                            <Button type="primary" htmlType="submit">保存</Button>
                            <Button style={{ marginLeft: "8px" }} onClick={() => {
                                history.back()
                            }}>返回</Button>
                        </Form.Item>
                    </Form>
                </div>
            </Card>
            <Modal
                title="商品选择"
                width="60%"
                visible={visable}
                onCancel={closeModal}
                footer={null}
            >
                <Selector close={closeModal} idList={[]} selectFinish={selectFinish} />
            </Modal>
        </PageHeaderWrapper>
    );
};
export default save;